@import "./../../../style/font.scss";
@import "./../../../style/color.scss";

.vr-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .swiper {
    flex-grow: 1;
    width: 100%;
    box-sizing: border-box;
    // padding: 30px 30px;
    overflow: hidden;

   .swiper-container.swiper-container-vertical,
    .swiper-container.swiper-container-vertical.swiper-container-android{
      height: 100%;

     .swiper-slide.swiper-slide-active {
       transform: scale(1, 1.2);
       transition: .8s;

       .swiper-content {
         &:after {
           display: none;
         }
       }
     }

      .swiper-slide {
        transform: scale(0.85);
        transform-origin: center center;

        .swiper-content-wrap {
          box-sizing: border-box;
          padding: 30px;
          height: 100%;
        }

        .swiper-content {
          background-color: #FFFFFF;
          border-radius: 12px;
          border: solid 1px $list-line-color;
          box-sizing: border-box;
          padding: 22px 22px;
          position: relative;
          height:100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          &:after {
            content: '';
            display: block;
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.41);
            border-radius: 12px;
          }
        }


        .swiper-title {
          @include font-dpr(28px);
          color: $title-text-color;
          height: 40px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .swiper-img {
          flex-shrink: 1;
          flex-grow: 1;
          width:100%;
          height: 85%;
          background-color: #000000;
          position: relative;

          .img {
            width: 100%;
            height: 100%;
          }

          .play {
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%, -50%);
            width: 56px;
            height: 46.5px;
          }
        }
      }
    }
    .swiper-slide.swiper-slide-prev,
    .swiper-slide.swiper-slide-next {
      transform: scale(0.85) !important;
      transition: .8s;
      z-index: -9999 !important;
    }

    .swiper-slide.swiper-slide-duplicate.swiper-slide-prev {
      top:0;
    }
  }
}



.vr-detail-page {
  height: 100%;

  .video-wrap {
    width: 100%;
    height: 400px;
    background-color: #000000;

    .video-play {
      height: 400px;
      width: 100%;
    }
  }

  .vr-wrap {
    padding: 30px;

    .vr-title {
      font-family: $regular-font-family;
      font-size: 32px;
      @include font-dpr(32px);
      color: $title-text-color;
      letter-spacing: 0;
    }

    .vr-content {
      padding-top: 40px;
      font-family: $regular-font-family;
      @include font-dpr(28px);
      color: $assist-text-color;
      letter-spacing: 0;
    }
  }

}
